<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UGame</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.raty.min.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script type="text/javascript">
        function loaded() {
            document.addEventListener('touchmove', function(e) {
                e.preventDefault();
            });
            myScroll = new iScroll('game-screen-shot-scroller', {desktopCompatibility:true,scrollbarColor:'#42A90E'});
        }
        document.addEventListener('DOMContentLoaded', loaded);
    </script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/game.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header" class="default-panel">
    <div id="header-top" class="default-panel">
        <div id="logo"></div>
        <!-- End #logo -->

        <div id="action-panel">
            <a href="#" id="settingButton" onclick="return false">
                <img src="images/setting.png" alt="">
            </a>
            <a href="#" id="accountButton" onclick="return false">
                <img src="images/account.png" alt="">
            </a>
            <a id="searchButton" href="#" onclick="return false">
                <img src="images/search.png" alt="">
            </a>
        </div>
        <!-- End #action-panel -->
    </div>
    <!-- End #header-top -->

    <div class="fd-panel">
        <div id="search-panel">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
                        <div class="left-fd-panel default-panel">
                        </div>
                        <!-- End .left-fd-panel -->
                    </td>
                    <td style="width: 224px;" valign="top">
                        <div class="center-fd-panel default-panel">
                            <div class="main-fd-panel">
                                <div class="text-input-2">
                                    <input type="text" value="Enter Search Keyword"/>
                                    <a href="#"></a>
                                </div>
                            </div>
                            <!-- End .main-fd-panel -->
                            <div class="bottom-fd-panel">
                            </div>
                            <!-- End .bottom-fd-panel -->
                        </div>
                        <!-- End .center-fd-panel -->
                    </td>
                    <td valign="top">
                        <div class="right-fd-panel default-panel">
                        </div>
                        <!-- End .right-fd-panel -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- End #search-panel -->

        <div id="login-panel">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
                        <div class="left-fd-panel default-panel">
                            <a class="sign-up" href="#"></a>
                        </div>
                        <!-- End #left -->
                    </td>
                    <td valign="top" style="width: 224px;">
                        <div class="center-fd-panel default-panel">
                            <div class="main-fd-panel">
                                <div class="text-input-1">
                                    <input type="text" value="email"/>
                                </div>
                                <div class="text-input-1">
                                    <input type="password" value="*****"/>
                                </div>
                            </div>
                            <!-- End .main-fd-panel -->
                            <div class="bottom-fd-panel">
                            </div>
                            <!-- End .bottom-fd-panel -->
                        </div>
                        <!-- End .center-fd-panel -->
                    </td>
                    <td valign="top">
                        <div class="right-fd-panel default-panel">
                            <a class="sign-in" href="#"></a>
                        </div>
                        <!-- End #right -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- End #login-panel -->

        <div id="language-panel">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
                        <div class="left-fd-panel default-panel">
                        </div>
                        <!-- End .left-fd-panel -->
                    </td>
                    <td valign="top" style="width: 224px;">
                        <div class="center-fd-panel default-panel">
                            <div class="main-fd-panel">
                                <div class="check-input-1">
                                    <input type="radio" value="en-US" id="en-US" name="language"/>
                                    <label for="en-US">English</label>
                                </div>
                                <div class="check-input-1">
                                    <input type="radio" value="vi-VN" id="vi-VN" name="language"/>
                                    <label for="vi-VN">Tiếng Việt</label>
                                </div>
                            </div>
                            <!-- End .main-fd-panel -->
                            <div class="bottom-fd-panel">
                            </div>
                            <!-- End .bottom-fd-panel -->
                        </div>
                        <!-- End .center-fd-panel -->
                    </td>
                    <td valign="top">
                        <div class="right-fd-panel default-panel">
                        </div>
                        <!-- End .right-fd-panel -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- End #language-panel -->
    </div>
    <!-- End #fd-panel-->

    <div id="banner" class="default-panel">
        <img src="images/banner.png" alt="">
    </div>
    <!-- End #banner -->
    <div id="main-nav" class="default-panel">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#">News</a></td>
                <td class="active"><a href="#">Store</a></td>
                <td><a href="#">Forum</a></td>
            </tr>
        </table>
    </div>
    <!-- End #main-nav -->
</div>
<!-- End #header -->

<div id="main" class="default-panel">
<div id="game-banner" class="default-panel">
    <img src="items/banners/1-large.jpg" width="320" alt="">
</div>
<!-- End #game-banner -->
<div id="game-info" class="default-panel">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top">
                <div id="game-icon">
                    <div class="rating"></div>
                    <img id="icon" src="items/icons/1.png" width="45" height="45" alt=""/>
                </div>
                <!-- End #game-icon -->
            </td>
            <td valign="top">
                <h4>Great little war game</h4>
                <span class="text-effect-1 price">15K (100 ucoin)</span>

                <p><span>Size: </span>7.2Mb</p>

                <p><span>Downloads: </span>12.421</p>

                <p><span>Category: </span>Brain & Puzzle</p>

                <p><span>Updated: </span>June 8, 2012</p>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="btn-download">
                    <a href="#" class="text-effect-1 btn-label">Download</a>
                </div>
                <div id="btn-love">
                    <a href="#" class="text-effect-1 btn-label">U love it!</a>
                </div>
                <div id="btn-share">
                    <a href="#" class="text-effect-1 btn-label">U share</a>
                </div>
            </td>
        </tr>
    </table>
</div>
<!-- End #game-info -->
<div id="game-description" class="default-panel doc-description-collapsed">
    <div class="description-content default-panel">
        <p><b>Tải game Boom nước miễn phí</b></p>

        <p>Trải nghiệm những hình ảnh mát dịu giữa mùa hè nóng bức với Game Boom nước cực Cool của Qplay.vn.</p>

        <p>Câu chuyện kể về hành trình thú vị của cậu bé tên Boom nước với ước mơ trở thành thợ săn tài ba.</p>

        <p>Nhưng giấc mơ nhỏ bé của Boom nước bị phá vỡ khi tên Hải tặc gian ác xuất hiện và bắt đi toàn bộ dân
            làng.</p>

        <p>Với vũ khí là những quả Bong bóng nước cậu bé Boom nước đã chiến đấu với tên Hải tặc gian ác cùng đồng bọn
            thế nào?</p>

        <p>Hãy tham gia ngay vào hành trình của cậu bé Boom nước đáng yêu nhé!</p>
    </div>
    <div class="doc-description-overflow"></div>
</div>
<!-- End #game-description -->

<div class="more">
    <a href="#" onclick="return false;"></a>
</div>
<!-- End .more -->

<div id="game-screen-shot-wrapper" class="default-panel">
    <div id="game-screen-shot">
        <div id="game-screen-shot-scroller">
            <div class="slider-item-384x230"><img src="items/screens/1-1.jpg" alt=""></div>
            <div class="slider-item-154x230"><img src="items/screens/6-1.jpg" alt=""></div>
            <div class="slider-item-384x230"><img src="items/screens/1-2.jpg" alt=""></div>
            <div class="slider-item-154x230"><img src="items/screens/6-2.jpg" alt=""></div>
            <div class="slider-item-384x230"><img src="items/screens/1-3.jpg" alt=""></div>
            <div class="slider-item-154x230"><img src="items/screens/6-3.jpg" alt=""></div>
            <div class="slider-item-384x230"><img src="items/screens/1-4.jpg" alt=""></div>
        </div>
        <!-- End #game-screen-shot-scroller -->
    </div>
    <!-- End #game-screen-shot -->
</div>
<!-- End #game-screen-shot-wrapper -->
<div id="game-comment" class="default-panel">

    <div id="comment-header"><p>Bình luận</p></div>

    <div class="comment-item">
        <p class="comment-name">
            Nobitada
            <span>(17:43 12/3/2012):</span>
        </p>

        <p class="comment-content">Game này chơi hay đó :X</p>
    </div>
    <!-- End .comment-item -->
    <div class="comment-item">
        <p class="comment-name">
            Xutaka
            <span>(4:42 16/3/2012):</span>
        </p>

        <p class="comment-content">Mình không down được là sao :(?</p>
    </div>
    <!-- End .comment-item -->
    <div class="comment-item last-item">
        <p class="comment-name">
            Chaitaken
            <span>(6:23 12/4/2012):</span>
        </p>

        <p class="comment-content">Game hay!</p>
    </div>
    <!-- End .comment-item -->
    <div class="more">
        <a href="#" onclick="return false;"></a>
    </div>
    <!-- End .more -->
</div>
<!-- End #game-comment -->
<div id="comment-form" class="default-panel">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2">
                <span class="text-input-left"></span>
                <textarea id="txt-comment">Viết bình luận của bạn vào đây ;)</textarea>
                <span class="text-input-right"></span>
            </td>
        </tr>
        <tr>
            <td><input type="text" id="txt-captcha">
                <img src="images/captcha.png" style="vertical-align: middle;" alt="">
            </td>
            <td><a href="#" id="btn-send">Send</a></td>
        </tr>
    </table>
</div>
<!-- End #comment-form -->
<div id="game-relate" class="default-panel">
    <div id="relate-header"><p>Ứng dụng liên quan</p></div>

    <div class="item">
        <div class="item-title">
            <p class="title">Great Little War Game <span class="text-effect-1 price">15K</span></p>

            <div class="star"></div>
        </div>
        <!-- End .item-title -->

        <div class="item-main-content">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="45px">
                        <div class="status status-hot">
                        </div>
                        <!-- End .status -->
                        <img class="game-icon" src="images/game-icon.png" alt="">
                    </td>
                    <td valign="top">
                        <div class="content">
                            <span>Views: 12.023</span>

                            <p>Game Great Little War Game với hình ảnh ngộ nghĩnh, vui nhộn đã có mặt trên Android.</p>
                        </div>
                        <!-- End .content -->
                    </td>
                    <td width="50px">
                        <a class="download-button-1" href="#" onclick="return false;"></a>
                        <span class="download-number">(5.023)</span>
                        <!-- End .action -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- End .item-main-content -->
    </div>
    <!-- End .item -->

    <div class="item">
        <div class="item-title">
            <p class="title">Great Little War Game <span class="text-effect-1 price">15K</span></p>

            <div class="star"></div>
        </div>
        <!-- End .item-title -->

        <div class="item-main-content">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="45px">
                        <div class="status status-new">
                        </div>
                        <!-- End .status -->
                        <img class="game-icon" src="images/game-icon.png" alt="">
                    </td>
                    <td valign="top">
                        <div class="content">
                            <span>Views: 12.023</span>

                            <p>Game Great Little War Game với hình ảnh ngộ nghĩnh, vui nhộn đã có mặt trên Android.</p>
                        </div>
                        <!-- End .content -->
                    </td>
                    <td width="50px">
                        <a class="download-button-1" href="#" onclick="return false;"></a>
                        <span class="download-number">(5.023)</span>
                        <!-- End .action -->
                    </td>
                </tr>
            </table>
        </div>
        <!-- End .item-main-content -->
    </div>
    <!-- End .item -->
</div>
<!-- End #game-relate -->

<div class="clear"></div>
</div>
<!-- End #main -->

<div id="footer" class="default-panel">
    <div id="footer-banner">
    </div>
    <!-- End #footer-banner -->
    <div id="footer-content" class="default-panel">
        <div id="footer-logo">
        </div>
        <!-- End #footer-logo -->

        <a class="email" href="#"></a>
        <a class="phone" href="#"></a>
    </div>
    <!-- End #footer-content -->
</div>
<!-- End #footer -->
</div>
<!-- End #wrapper-->
<script type="text/javascript" src="js/ugame.js"></script>
<script type="text/javascript" src="js/item.js"></script>
<script type="text/javascript">
    $('.rating').raty({
        readOnly : true,
        score    : 4,
        size: 9,
        width: 70
    });
    $('.star').raty({
        readOnly : true,
        score    : 4,
        size: 9,
        width: 64
    });
    $('.more a').click(function() {
        var container = $('#game-description');
        var content = $('.description-content');
        if(!$(this).hasClass('active')){
            $(container).animate({
               height: $(content).height()
            },function(){
                $(container).removeClass('doc-description-collapsed');
                $('.more a').addClass('active');
            });
        }else{
            $(container).addClass('doc-description-collapsed');
            $(container).animate({
               height: "100px"
            },function(){
                $('.more a').removeClass('active');
            });
        }
    });
</script>
</body>
</html>